<template>
  <div class="content-container">
      <el-card>
    <!-- 查询部分 -->
    <el-form :model="query" :inline="true" class="demo-form-inline">
      <#list fieldList as field>
        <el-form-item label="${field.remark}">
          <el-input v-model="query.${field.javaField}" clearable />
        </el-form-item>
      </#list>
      <el-form-item>
        <el-button type="success" @click="formQuery(false)">查询</el-button>
        <el-button type="warning" @click="formQuery(true)">重置</el-button>
        <el-button type="primary" @click="openDialog(null)">新增</el-button>

        <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确认删除选中数据?"
            @confirm="removeRows"
            width="200px"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!-- 数据部分 -->
    <el-table
        max-height="600px"
        :data="tableData"
        stripe
        style="width: 100%; margin-top: 10px"
        ref="tableDataRef"
    >
      <el-table-column type="selection"/>
    <#list fieldList as field>
      <el-table-column prop="${field.javaField}" label="${field.remark}" />
    </#list>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="updateTime" label="修改时间"/>
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button @click="openDialog(scope.row)" link type="primary">
            编辑
          </el-button>
          <el-button @click="viewDialog(scope.row)" link type="success">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div style="margin-top: 20px">
      <el-pagination
          v-model:current-page="query.current"
          v-model:page-size="query.size"
          :page-sizes="[100, 200, 300, 400]"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
        v-model="dialogVisible"
        :title="(formData.id ? '编辑' : '新增') + '${comment}'"
        width="60%"
        :show-close="false"
        :close-on-click-modal="false"
    >
      <el-form
          :rules="rules"
          :model="formData"
          class="demo-form-inline"
          ref="formDataRef"
      >
      <#list fieldList as field>
        <el-form-item prop="${field.javaField}" label="${field.remark}">
          <el-input v-model="formData.${field.javaField}" clearable />
        </el-form-item>
      </#list>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="formSubmit">确认</el-button>
          </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="viewVisible"
      width="60%"
      :show-close="false"
      :close-on-click-modal="false"
    >
        <el-form>
          <#list fieldList as field>
            <el-form-item>
                <el-input v-model="viewData.${field.javaField}" disabled>
                  <template #prepend>${field.remark}</template>
                </el-input>
            </el-form-item>
          </#list>
            <el-form-item>
              <el-input v-model="viewData.createTime" disabled>
                <template #prepend>创建时间</template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="viewData.updateTime" disabled>
                <template #prepend>修改时间</template>
              </el-input>
            </el-form-item>
        </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="viewVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
  </div>
</template>
<script setup lang="ts" name="${className}">
import {onMounted, ref, reactive, toRefs} from 'vue'
import type {
  ${className},
  ${className}ModDTO,
  ${className}QueryDTO,
  ${className}Vo,
} from '@/api/${code}/${className?uncap_first}/type'
import {
  ${className?uncap_first}Add,
  ${className?uncap_first}Del,
  ${className?uncap_first}Mod,
  ${className?uncap_first}Query,
} from '@/api/${code}/${className?uncap_first}'
import {ElNotification} from 'element-plus'

const formDataRef = ref()
const tableDataRef = ref()
const initQuery = () => {
  return {current: 1, size: 10} as ${className}QueryDTO
}
const state = reactive<any>({
  query: initQuery(),
  tableData: [] as ${className}[],
  total: 0,
  dialogVisible: false,
  viewVisible: false,
  viewData: {} as ${className}Vo,
  formData: {} as ${className}ModDTO,
  rules: {
  <#list fieldList as field>
    <#if field.required>
    ${field.javaField}: [{ required: true, message: '${field.remark}不能为空', trigger: 'blur' }],
    </#if>
  </#list>
  },
})
const {
  query,
  tableData,
  total,
  dialogVisible,
  formData,
  rules,
  viewVisible,
  viewData,
} = toRefs(state)
const openDialog = (data: any) => {
  if (formDataRef.value) {
    formDataRef.value.resetFields()
  }

  formData.value = data == null ? {} : data
  dialogVisible.value = true
}
const viewDialog = (data: any) => {
  viewVisible.value = true
  viewData.value = data
}
const handleSizeChange = (size: number) => {
  query.value.size = size
  buildTable()
}
const handleCurrentChange = (current: number) => {
  query.value.current = current
  buildTable()
}
onMounted(() => {
  buildTable()
})
const buildTable = async () => {
  const result = await ${className?uncap_first}Query(query.value)
  tableData.value = result.data.rows
  total.value = result.data.total
}

const formQuery = (reset: boolean) => {
  reset ? (query.value = initQuery()) : query.value
  buildTable()
}
const formSubmit = async () => {
  await formDataRef.value?.validate()
  if (formData.value.id) {
    await ${className?uncap_first}Mod(formData.value)
  } else {
    await ${className?uncap_first}Add(formData.value)
  }
  dialogVisible.value = false
  await buildTable()
}
const removeRows = async () => {
  const rows = tableDataRef.value.getSelectionRows()
  if (rows.length == 0) {
    ElNotification({
      title: '删除失败',
      message: '请选择要删除的数据',
      type: 'warning',
    })
    return
  }
  const ids = rows.map((each: any) => each.id)
  await ${className?uncap_first}Del({ids: ids})
  await buildTable()
}
</script>
<style scoped lang="scss">
  .content-container {
    padding: 12px;
  }
</style>
